<template>
  <Modal
    v-model:active="stretchModalActive"
    transfer
    title="拉伸"
    hide-mask
    draggable
    :width="500"
    :no-footer="true"
    @close="handleCancel"
  >
    <div>
      <div>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">选择器</div>
        </div>
        <div class="chose-box">
          <RadioGroup
            vertical
            v-model:value="parameter.method"
            @change="onChangeMethod"
          >
            <Radio
              v-for="item in methodList"
              :key="item.label"
              :label="item.label"
            >
              <div class="radio_box">
                <div class="radio_item">{{ item.content }}</div>
                <div class="selector-buttons">
                  <span
                    class="selector-button"
                    :class="{ active: item.label === parameter.method }"
                  >
                    单元
                  </span>
                  <button class="icon-button" @click="handleClear">
                    <img
                      src="../../assets/delete.svg"
                      alt=""
                      class="icon imgStyle"
                    />
                  </button>
                </div>
              </div>
            </Radio>
          </RadioGroup>
        </div>
      </div>
      <div>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">参数</div>
        </div>
        <div class="parameter_number">
          <div class="longNumber">厚度：</div>
          <div class="parameter_numberinput">
            <NumberInput v-model:value="parameter.thickness"></NumberInput>
          </div>
        </div>
        <div class="parameter_number">
          <div class="longNumber">份数：</div>
          <div class="parameter_numberinput">
            <NumberInput v-model:value="parameter.segment"></NumberInput>
          </div>
        </div>
      </div>
      <div>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">方向</div>
        </div>
        <div class="direction_box">
          <Grid :gap="10" :columns="24">
            <Cell
              :width="8"
              v-for="item in directionList"
              :key="item.direction"
            >
              <div
                class="direction_name"
                :style="{ backgroundColor: item.color }"
              >
                {{ item.name }}
              </div>
              <div class="direction_foot">
                <Button
                  class="mr-5"
                  @click="handleDirectionReset(item.direction)"
                  >{{ item.direction }}</Button
                >
                <NumberInput
                  v-model:value="direction[item.direction]"
                  :min="-1"
                  :max="1"
                  style="width: 72px"
                />
              </div>
            </Cell>
          </Grid>
        </div>
      </div>
      <div class="title">
        <div class="title_color"></div>
        <div class="title_content">网格配置</div>
      </div>
      <div class="chose_radiogroup">
        <RadioGroup
          v-model:value="parameter.tessmethod"
          :options="tessmethodList"
          :disabled="parameter.method === 'dragbynode'"
        />
      </div>
      <div class="parameter_number" v-if="parameter.tessmethod === 'bysize'">
        <div class="longNumber">尺寸：</div>
        <div class="parameter_numberinput">
          <NumberInput
            v-model:value="parameter.tesssize"
            :disabled="parameter.method === 'dragbynode'"
          ></NumberInput>
        </div>
      </div>
      <div class="parameter_number" v-if="parameter.tessmethod === 'bynum'">
        <div class="longNumber">数量：</div>
        <div class="parameter_numberinput">
          <NumberInput
            v-model:value="parameter.tessnum"
            placeholder="请输入数字"
            :disabled="parameter.method === 'dragbynode'"
          />
        </div>
      </div>
      <Divider style="margin: 16px 0" />
      <Space :size="48" style="margin: 0 12%">
        <Checkbox
          v-model:checked="parameter.close"
          :disabled="parameter.method === 'dragbycurve'"
          >闭合轮廓线</Checkbox
        >
        <Checkbox
          v-model:checked="parameter.sort"
          :disabled="parameter.method === 'dragbycurve'"
          >按缝隙排序</Checkbox
        >
      </Space>

      <div class="title mt-20">
        <div class="title_color"></div>
        <div class="title_content">创建到：</div>
      </div>
      <div class="createTo-box">
        <Select
          :options="selectList"
          v-model:value="toComp"
          style="width: 120px"
        ></Select>
        <span class="createTo-text" v-if="toComp === 0">unspecified</span>
      </div>
    </div>
    <div class="foot-box">
      <Button type="primary" @click="handleCreate">创建</Button>
      <Button type="default" @click="handleCancel">取消</Button>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import {
  Modal,
  Button,
  Select,
  NumberInput,
  Checkbox,
  RadioGroup,
  Radio,
  Input,
  Grid,
  Cell,
  Space,
  Divider,
  Toast,
  Notice,
} from "cax-ui";
import { ref, reactive, watch } from "vue";
import { useMeshEditStore } from "@/UI/store/meshEditStore";
import { storeToRefs } from "pinia";
import { useCoreStore, _global } from "@/UI/store";
import {
  Meshextrude2dCreateOptions,
  Meshextrude2dPreviewOptions,
  STATUS_CODE,
} from "@/FrontProcessing";
const meshEditStore = useMeshEditStore();
const { stretchModalActive } = storeToRefs(meshEditStore);
const coreStore = useCoreStore();

const methodList = [
  { content: "拉伸曲线", label: "dragbycurve" },
  { content: "拉伸节点", label: "dragbynode" },
];
const selectList = [
  {
    label: "当前组件",
    value: 0,
  },
  {
    label: "新建组件",
    value: 1,
  },
  {
    label: "选择组件",
    value: 2,
    disabled: true,
  },
];
type Dir = "X" | "Y" | "Z";
const directionList: {
  name: string;
  direction: Dir;
  color: string;
}[] = [
  {
    name: "N1",
    direction: "X",
    color: "#ec808d",
  },
  {
    name: "N2",
    direction: "Y",
    color: "#caf982",
  },
  {
    name: "N3",
    direction: "Z",
    color: "#81d3f8",
  },
];
const tessmethodList = [
  { content: "原始", label: "rawtess" },
  { content: "数量", label: "bynum" },
  { content: "尺寸", label: "bysize" },
];
const toComp = ref(0);

const parameter = reactive({
  method: "dragbycurve",
  thickness: 10.0, // 厚度
  segment: 5, // 份数
  tessmethod: "bynum", // 曲线：网格配置
  tessnum: 20, // 曲线：网格配置 - 数量
  tesssize: 0.5, // 曲线：网格配置 - 尺寸
  close: false, // 节点：闭合轮廓线
  sort: false, // 节点：按缝隙排序
});
const direction = reactive({
  X: 0.0,
  Y: 0.0,
  Z: 1.0,
});
function handleDirectionReset(dir: Dir) {
  let key: Dir;
  for (key in direction) {
    if (key === dir) {
      direction[dir] = direction[dir] ? -direction[dir] : 1.0;
    } else {
      direction[key] = 0;
    }
  }
}
function onChangeMethod(val: string) {
  console.log("change method: ", val);
  let mode = STATUS_CODE.EDGE;
  if (val === "dragbycurve") {
    _global.Engine.unregisterSelectPointRightClick();
  } else {
    mode = STATUS_CODE.VERTEX_SELECT;
    _global.Engine.registerSelectPointRightClick();
  }
  coreStore.setEngineState(mode);
  _global.Engine.meshextrude2d.updateMethod(val);
}

function handleClear() {
  _global.Engine.meshextrude2d.clear(parameter.method);
}
const getDir = () => `${direction.X} ${direction.Y} ${direction.Z}`;

function handleCreate() {
  const dir = getDir();
  const method = parameter.method;
  const params: Meshextrude2dCreateOptions = {
    dir,
    method,
    comp: "current",
    segment: parameter.segment,
    thickness: parameter.thickness,
  };
  if (method === "dragbycurve") {
    params["tessmethod"] = parameter.tessmethod;
    if (parameter.tessmethod === "bysize") {
      params["tesssize"] = parameter.tesssize;
    } else {
      params["tessnum"] = parameter.tessnum;
    }
  } else {
    params["close"] = parameter.close ? 1 : 0;
    params["sort"] = parameter.sort ? 1 : 0;
  }
  Toast.loading({ content: "拉伸中", duration: 0 });
  _global.Engine.meshextrude2d
    .addEntity(method)
    .then((res) => {
      console.log("add entity: ", res);
      _global.Engine.meshextrude2d.create(params).then((result) => {
        Toast.close();
        coreStore.setElements();
      });
    })
    .catch((err) => {
      console.log("add entity err: ", err);
      Toast.close();
      Notice.error(
        `需要先选中${method === "dragbycurve" ? "曲线" : "2个或多个节点"}`
      );
    });
}

function handleCancel() {
  stretchModalActive.value = false;
}

watch(stretchModalActive, (open) => {
  if (open) {
    onChangeMethod(parameter.method);
  } else {
    if (parameter.method === "dragbynode") {
      _global.Engine.unregisterSelectPointRightClick();
    }
    _global.Engine.meshextrude2d.leave(parameter.method);
    coreStore.setEngineState(STATUS_CODE.NORMAL);
  }
});
</script>
<style scoped>
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.foot-box {
  margin-top: 40px;
  width: 100%;
  height: 40px;
  text-align: right;
}
:deep(.vxp-option-vars) {
  /* --vxp-option-color-disabled:  */
  --vxp-option-bg-color-disabled: var(--vxp-fill-color-disabled);
}
.createTo-box {
  padding-left: 40px;
  display: flex;
  justify-content: flex-start;

  :deep(.vxp-select__label) {
    text-align: left;
  }
  :deep(.vxp-option--disabled) {
    color: var(--vxp-content-color-disabled);
  }
  :deep(.vxp-option--disabled:hover) {
    color: var(--vxp-content-color-disabled);
  }
}
.createTo-btn {
  margin-left: 10px;
}
.createTo-text {
  margin-left: 10px;

  height: 30px;
  line-height: 30px;
}
.createTo-select {
  width: 40%;
}
.parameter_number {
  padding: 0 25px;
  display: flex;
  justify-content: flex-start;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
}
.parameter_numberinput {
  width: 40%;
}
.longNumber {
  width: 15%;
  text-align: right;
}
.chose-box {
  padding-left: 8%;
  margin-bottom: 10px;
}
.radio_item {
  display: inline-block;
  width: 100px;
}
.selector-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-button {
  display: inline-block;
  height: 22px;
  width: 160px;
  padding: 0 16px;
  border: 1px solid #ccc;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  /* flex-grow: 1; */
  font-weight: normal;
}
.icon-button {
  width: 32px;
  height: 22px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid #ccc;
  border-left: none;
  cursor: pointer;
  background-color: #fff;
}
.icon-button:hover {
  background-color: var(--vxp-color-warning-opacity-7);
}
.imgStyle {
  height: 100%;
}
.radio_box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.chose_radiogroup {
  margin-bottom: 10px;
  margin-left: 12%;
}
.chose_radiogroup :deep(.vxp-radio-vars) {
  --vxp-radio-series-span: 30px;
}
.direction_box {
  margin-bottom: 16px;
  padding: 0 40px;
}
.direction_name {
  text-align: center;
  height: 22px;
  line-height: 22px;
  border-radius: 5px;
}
.direction_foot {
  margin-top: 6px;
  display: flex;
}
.direction_foot :deep(.vxp-button-vars) {
  --vxp-button-min-width: 48px;
}
</style>
